<template>
    <div class="common-layout">
        <el-container class="container">
            <el-aside class="aside" :width="asideWidth">
                <Nav />
            </el-aside>
            <el-container>
                <el-header class="head">
                    <Header />
                </el-header>
                <el-main>
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script setup>
import { ElContainer, ElHeader, ElAside, ElMain } from "element-plus";
import Header from "@/components/Header/index.vue";
import Nav from "@/components/Nav/index.vue";
import { computed, toRefs } from "vue";
import { useStore } from "@/store";

const store = useStore()
const { isOpen } = toRefs(store)
const asideWidth = computed(() => {
    let width = 240;
    if (isOpen.value) width = 64;
    return width + 'px'
})
</script>

<style lang="less" scoped>
@import "./index.less";
</style>
